<template>
    <div>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>企业详情</span>
                <el-button
                    style="float: right; padding: 3px 0"
                    type="text"
                    @click="goBack"
                >返回
                </el-button>
            </div>
            <div>
                <el-form ref="searchForm" :inline="true" label-suffix="" label-width="100px"
                         label-position="left" size="small">
                    <el-row>
                        <el-col>
                            <el-form-item>
                                <el-button type="success" @click="getProfileUrl">获取客户画像URL</el-button>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="success" @click="getMaterialUrl">获取素材中心URL</el-button>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="success" @click="addCustomApp">接入代开发应用</el-button>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="success" @click="fillCorpInfo">完善企业信息</el-button>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="success" @click="contactConfig">通讯录助手配置</el-button>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="success" @click="customerConfig">客户联系配置</el-button>
                            </el-form-item>
                            <el-form-item v-if="workCorpInfo.canDelete">
                                <el-button size="small" type="danger" @click="deleteCorpInfo">
                                    删除
                                </el-button>
                            </el-form-item>
                            <el-form-item v-if="!workCorpInfo.linkStatus">
                                <el-button size="small" type="danger" @click="linkDialogVisible = true">
                                    关联商户
                                </el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <el-descriptions title="" direction="vertical" :column="8" border size="small">
                <el-descriptions-item label="企业ID">
                    {{ workCorpInfo.corpId }}
                </el-descriptions-item>
                <el-descriptions-item label="明文ID">
                    {{ workCorpInfo.corpIdPlain }}
                </el-descriptions-item>
                <el-descriptions-item label="企业名称">
                    {{ workCorpInfo.corpName }}
                </el-descriptions-item>
                <el-descriptions-item label="企业全称">
                    {{ workCorpInfo.corpFullName }}
                </el-descriptions-item>
            </el-descriptions>
        </el-card>
        <el-divider></el-divider>
        <el-tabs v-model="activeName">
            <el-tab-pane label="企业应用" name="corpApp">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>第三方应用</span>
                    </div>
                    <work-corp-third ref="workCorpThird" :work-corp-id="id"></work-corp-third>
                </el-card>
                <el-divider></el-divider>
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>自身应用</span>
                    </div>
                    <work-corp-self ref="workCorpSelf" :work-corp-id="id"></work-corp-self>
                </el-card>
            </el-tab-pane>
            <el-tab-pane label="组织架构" name="organization">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>部门列表</span>
                    </div>
                    <work-department ref="workDepartment" :work-corp-id="id"></work-department>
                </el-card>
                <el-divider></el-divider>
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>员工列表</span>
                    </div>
                    <work-employee ref="workEmployee" :work-corp-id="id"></work-employee>
                </el-card>
            </el-tab-pane>
            <el-tab-pane label="客户管理" name="customer">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>客户列表</span>
                    </div>
                    <work-customer ref="workCustomer" :work-corp-id="id"></work-customer>
                </el-card>
                <el-divider></el-divider>
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>客户标签</span>
                    </div>
                    <work-tag-group ref="workTagGroup" :work-corp-id="id"></work-tag-group>
                </el-card>
                <el-divider></el-divider>
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>客户群聊</span>
                    </div>
                    <work-group-chat ref="workGroupChat" :work-corp-id="id"></work-group-chat>
                </el-card>
            </el-tab-pane>
            <el-tab-pane label="欢迎语配置" name="welcomeMsg">
                <work-welcome-msg :work-corp-id="id" ref="workWelcomeMsg"></work-welcome-msg>
            </el-tab-pane>
            <el-tab-pane label="运营活码配置" name="qrcode">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>员工活码配置</span>
                    </div>
                    <work-qrcode-employee ref="workQrcodeEmployee" :work-corp-id="id"></work-qrcode-employee>
                </el-card>
                <el-divider></el-divider>
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>群活码配置</span>
                    </div>
                    <work-qrcode-group-chat ref="workQrcodeGroupChat" :work-corp-id="id"></work-qrcode-group-chat>
                </el-card>
            </el-tab-pane>
            <el-tab-pane label="素材管理" name="material">
                <work-material ref="workMaterial" :work-corp-id="id"></work-material>
            </el-tab-pane>
        </el-tabs>

        <el-dialog title="完善企业信息" width="30%" :visible.sync="fillCorpInfoDialogVisible">
            <el-form :model="fillCorpInfoForm" label-width="120px" size="small">
                <el-form-item label="企业ID">
                    <el-input v-model="fillCorpInfoForm.corpIdPlain" placeholder="企业ID"></el-input>
                </el-form-item>
                <el-form-item label="企业全称">
                    <el-input v-model="fillCorpInfoForm.corpFullName" placeholder="企业全称"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="fillCorpInfoDialogVisible = false" size="small">取 消</el-button>
                <el-button @click="fillCorpInfoConfirm" type="primary" size="small">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="通讯录助手配置" width="30%" :visible.sync="contactConfigDialogVisible">
            <el-form :model="contactConfigForm" label-width="140px" size="small">
                <el-form-item label="通讯录助手SECRET">
                    <el-input v-model="contactConfigForm.secret" placeholder="通讯录SECRET" type="textarea"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="contactConfigDialogVisible = false" size="small">取 消</el-button>
                <el-button @click="contactConfigConfirm" type="primary" size="small">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="客户联系配置" width="30%" :visible.sync="customerConfigDialogVisible">
            <el-form :model="customerConfigForm" label-width="140px" size="small">
                <el-form-item label="客户联系SECRET">
                    <el-input v-model="customerConfigForm.secret" placeholder="客户联系SECRET"
                              type="textarea"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="customerConfigDialogVisible = false" size="small">取 消</el-button>
                <el-button @click="customerConfigConfirm" type="primary" size="small">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="关联商户" width="30%" :visible.sync="linkDialogVisible">
            <el-form :model="linkForm" label-width="140px" size="small">
                <el-form-item label="商户别名">
                    <el-input v-model="linkForm.merchantAlias" placeholder="请输入商户别名"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="linkDialogVisible = false" size="small">取 消</el-button>
                <el-button @click="linkConfirm" type="primary" size="small">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="授权二维码" width="30%" :visible.sync="authDialogVisible">
            <el-card>
                <img style="width: 100%" :src="authQrcode">
                <div style="padding: 14px;">
                    <div class="bottom clearfix">
                        扫描上面的二维码授权后，联系管理员后上线代开发应用。
                    </div>
                </div>
            </el-card>
        </el-dialog>
    </div>
</template>

<script>
import {
    configWorkCorpSelfContact,
    configWorkCorpSelfCustomer,
    deleteWorkCorp,
    fillWorkCorp,
    getCustomAppAuthQrcode,
    getWorkCorpById,
    getWorkCorpMaterialUrl,
    getWorkCorpProfileUrl,
    linkMerchant
} from '@/api/api'
import TablePopover from "@/component/single/TablePopover";
import WorkCorpThird from "@/component/workwx/WorkCorpThird";
import WorkCorpSelf from "@/component/workwx/WorkCorpSelf";
import WorkWelcomeMsg from "@/component/workwx/WorkWelcomeMsg";
import WorkQrcodeEmployee from "@/component/workwx/WorkQrcodeEmployee";
import WorkQrcodeGroupChat from "@/component/workwx/WorkQrcodeGroupChat";
import WorkDepartment from "@/component/workwx/WorkDepartment";
import WorkEmployee from "@/component/workwx/WorkEmployee";
import WorkCustomer from "@/component/workwx/WorkCustomer";
import WorkTagGroup from "@/component/workwx/WorkTagGroup";
import WorkGroupChat from "@/component/workwx/WorkGroupChat";
import WorkMaterial from "@/component/workwx/WorkMaterial";

export default {
    name: "WorkCorpDetail",
    components: {
        TablePopover,
        WorkCorpThird,
        WorkCorpSelf,
        WorkWelcomeMsg,
        WorkQrcodeEmployee,
        WorkQrcodeGroupChat,
        WorkDepartment,
        WorkEmployee,
        WorkCustomer,
        WorkTagGroup,
        WorkGroupChat,
        WorkMaterial
    },
    data() {
        return {
            // 分页搜索条件
            condition: {
                page: 1,
                rows: 10,
                total: 0,
                search: {}
            },
            // 当前企业信息
            workCorpInfo: {},
            // 当前企业ID
            id: '',
            // 企业安装的第三方应用
            thirdApps: [],
            // 企业安装的自身应用
            selfApps: [],

            fillCorpInfoForm: {},
            fillCorpInfoDialogVisible: false,

            contactConfigForm: {},
            contactConfigDialogVisible: false,

            customerConfigForm: {},
            customerConfigDialogVisible: false,

            // 授权对话框
            authDialogVisible: false,
            authQrcode: '',

            activeName: 'corpApp',

            // 关联商户对话框
            linkDialogVisible: false,
            linkForm: {},
        }
    },
    methods: {
        getProfileUrl() {
            getWorkCorpProfileUrl({id: this.id}).then(res => {
                if (res.respCode == 1000) {
                    navigator.clipboard.writeText(res.body.url).then(() => {
                        this.$message({
                            type: 'success',
                            message: '获取成功，您可以直接粘贴到你需要的地方!'
                        });
                    }).catch(err => {
                        // This can happen if the user denies clipboard permissions:
                        console.error('Could not copy text: ', err);
                    });
                }
            })
        },
        getMaterialUrl() {
            getWorkCorpMaterialUrl({id: this.id}).then(res => {
                if (res.respCode == 1000) {
                    navigator.clipboard.writeText(res.body.url).then(() => {
                        this.$message({
                            type: 'success',
                            message: '获取成功，您可以直接粘贴到你需要的地方!'
                        });
                    }).catch(err => {
                        // This can happen if the user denies clipboard permissions:
                        console.error('Could not copy text: ', err);
                    });
                }
            })
        },
        addCustomApp: function () {
            getCustomAppAuthQrcode().then(res => {
                if (res.respCode == 1000) {
                    this.authDialogVisible = true;
                    this.authQrcode = res.body.authQrcode;
                }
            })
        },
        fillCorpInfo: function () {
            this.fillCorpInfoDialogVisible = true;
        },
        fillCorpInfoConfirm: function () {
            this.fillCorpInfoForm.id = this.id;
            fillWorkCorp(this.fillCorpInfoForm).then(data => {
                this.fillCorpInfoDialogVisible = false;
                this.getData();
            });
        },
        linkConfirm: function() {
            this.linkForm.id = this.id;
            linkMerchant(this.linkForm).then(data => {
                if (data.respCode == 1000) {
                    this.linkDialogVisible = false;
                    this.getData();
                }
            });
        },
        contactConfig: function () {
            this.contactConfigDialogVisible = true;
        },
        contactConfigConfirm: function () {
            this.contactConfigForm.id = this.id;
            configWorkCorpSelfContact(this.contactConfigForm).then(data => {
                this.contactConfigDialogVisible = false;
                this.$refs.workCorpSelf.getData();
            });
        },
        customerConfig: function () {
            this.customerConfigDialogVisible = true;
        },
        customerConfigConfirm: function () {
            this.customerConfigForm.id = this.id;
            configWorkCorpSelfCustomer(this.customerConfigForm).then(data => {
                this.customerConfigDialogVisible = false;
                this.$refs.workCorpSelf.getData();
            });
        },
        // 删除企业信息
        deleteCorpInfo() {
            this.$confirm('该操作高危，会清除跟该企业相关的一切信息, 且不可恢复，请确认是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteWorkCorp({id: this.id}).then(data => {
                    if (data.respCode == '1000') {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.goBack();
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        },
        // 获取企业数据
        getData: function () {
            getWorkCorpById({"id": this.id}).then(data => {
                this.workCorpInfo = data.body;
            });
        },
        goBack() {
            // 编程式导航
            this.$router.go(-1);
        },
    },
    created() {
        this.id = this.$route.query.id;
        this.getData();
    },
}
</script>

<style scoped>
.el-input {
    width: 150px !important;
}

.el-select {
    width: 150px !important;
}
</style>
